import { Component, PropsWithChildren } from 'react'
import { View, Text, Image, Button, Swiper, SwiperItem } from '@tarojs/components'
import { AtIcon, AtTabs, AtTabsPane } from "taro-ui"
import map from '../../picture/map1.png'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  current: number
  constructor(props) {
    super(props)
    this.current = 1
    // this.state = {

    // }
  }
  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  onClick() {
    Taro.navigateTo({
      url: '/pages/MorePages/index'
    })
  }
  onClick1() {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }
  handleClick(index: number) {
    this.current = index
  }
  render() {
    const tabList = [{ title: '等额本息' }, { title: '等额本金' }]
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <Swiper
            className='test-h'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            circular
            indicatorDots
            autoplay>
            <SwiperItem>
              <Image src='https://www.bwie.net/statics/PCindex/images/index_banner1.jpg' />
            </SwiperItem>
            <SwiperItem>
              <Image src='https://www.bwie.net/statics/PCindex/images/index_banner2.jpg' />
            </SwiperItem>
            <SwiperItem>
              <Image src='https://www.bwie.net/statics/PCindex/images/index_banner3.jpg' />
            </SwiperItem>
          </Swiper>
          <View className='icons'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='36' color='#fff'></AtIcon>
          </View>
          <View className='length'>
            共3张
          </View>
          <View className='nums'>
            编号: 20638
          </View>
        </View>
        <View className='container'>
          <View className='tit'>碧桂园一期3室138万101m²苏外名额没用出售
            <Text>VR</Text>
          </View>
          <View className='price'>
            <Text>138</Text>万<Text> 3</Text>室<Text> 2</Text>厅<Text> 1</Text>卫  <Text>101</Text>m²
          </View>
          <View className='tit1'>
            房源信息
          </View>
          <View className='msg'>
            <View className='left'>
              <View className='l1'>
                单价
              </View>
              <View className='l2'>
                13663元/m²
              </View>
              <View className='l1'>
                楼层
              </View>
              <View className='l2'>
                高层/共18层
              </View>
            </View>
            <View className='center'>
              <View className='c1'>
                朝向
              </View>
              <View className='c2'>
                南
              </View>
              <View className='c1'>
                类型
              </View>
              <View className='c2'>
                高层住宅
              </View>
            </View>
            <View className='right'>
              <View className='r1'>
                装修
              </View>
              <View className='l2'>
                精装修
              </View>
              <View className='r1'>
                更新
              </View>
              <View className='r2'>
                19分钟前
              </View>
            </View>
          </View>
          <View className='ts'>
            房源特色
          </View>
          <View className='t1'>
            <View className='t11'>▎<Text>核心卖点</Text></View>
            <View className='des1'>
              原始装修 三室两厅一卫 客厅朝阳两卧室朝阳楼层好 苏外名额没用 各出各税
            </View>
          </View>
          <View className='t2'>
            <View className='t11'>▎<Text>核心卖点</Text></View>
            <View className='des2'>
              业主诚信出售此房, 积极配合看房和达成协议后各项手续。产权清洗无纠纷, 看房方便, 房主诚意出售
            </View>
          </View>
          <View className='t3'>
            <View className='t11'>▎<Text>核心卖点</Text></View>
            <View className='des3'>
              我从事房产工作已有多年, 经验丰富。
              <View>1:能够精准的根据每一位客户的详细需求匹配到性价比合适的</View>
              <View>2:和业主议价是我的强项, 让每位客户真正的省钱</View>
              <View>3:我们的服务能让您物超所值</View>
              <View>4:您的买房安家之旅, 让您更加 安心 放心 省心</View>
            </View>
          </View>
          <View className='goodtit'>
            宿迁碧桂园
            <Text>小区详情&gt;</Text>
          </View>
          <View className='thing'>
            <Image src='https://img0.baidu.com/it/u=1649151030,2162866999&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' />
            <View className='description'>
              <View className='pri'>参考均价 <Text>11763</Text>元/m²</View>
              <View className='mon'>比 上 月 <Text>持平</Text></View>
              <View className='address'>小区地址 <Text>石公山路6号</Text></View>
              <View className='search'>查看同小区1套在售房源&gt;</View>
            </View>
          </View>
          <View className='can'>
            参考月贷
          </View>
          <View className='content1'>
            <AtTabs current={this.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
              <AtTabsPane current={0} index={0}>
              </AtTabsPane>
              <AtTabsPane current={1} index={1}>
                <View className='year'>
                  <View>月供
                    ￥<Text>5148.05</Text>
                    (30年)
                  </View>
                </View>
                <View className='gn'>
                  <View className='g1'>
                    <View className='z'>总价</View>
                    <View className='num'>138.00万</View>
                  </View>
                  <View className='g1'>
                    <View className='z'>首付</View>
                    <View className='num'>41万<Text>(3成)</Text></View>
                  </View>
                  <View className='g1'>
                    <View className='z'>贷款</View>
                    <View className='num'>97.00万</View>
                  </View>
                  <View className='g1'>
                    <View className='z'>利息</View>
                    <View className='num'>+88.33万</View>
                  </View>
                </View>
              </AtTabsPane>
            </AtTabs>
          </View>
          <View className='around'>
            位置及周边
          </View>
          <View className='content2'>
            <Image src={map} />
          </View>
          <View className='recommend'>
            推荐房源
          </View>
          <View className='houseList'>
            <Image src='https://img1.baidu.com/it/u=1144874046,3925078084&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375' />
            <View className='description'>
              <View className='name1'>(苏宿园区)碧桂园文景阁超大平</View>
              <View className='name2'>台花园6室2厅4卫345万260平方米大小</View>
              <View className='position'>5室2厅4卫|260m²|南北<Text>碧桂园文景阁</Text></View>
              <View className='price'>345 <Text className='wan'>万</Text> <Text className='mian'>13269.23元/m²</Text></View>
              <View className='from'>
                <AtIcon value='user' size='24' color='#000'></AtIcon>
                <Text>陈冬红</Text>
                <Text>二百房</Text>
              </View>
            </View>
          </View>
          <View className='houseList'>
            <Image src='https://img0.baidu.com/it/u=3295534422,3155222370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' />
            <View className='description'>
              <View className='name1'>(苏宿园区)碧桂园文景阁超大平</View>
              <View className='name2'>台花园6室2厅4卫345万260平方米大小</View>
              <View className='position'>5室2厅4卫|260m²|南北<Text>碧桂园文景阁</Text></View>
              <View className='price'>345 <Text className='wan'>万</Text> <Text className='mian'>13269.23元/m²</Text></View>
              <View className='from'>
                <AtIcon value='user' size='24' color='#000'></AtIcon>
                <Text>陈冬红</Text>
                <Text>二百房</Text>
              </View>
            </View>
          </View>
          <View className='houseList'>
            <Image src='https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' />
            <View className='description'>
              <View className='name1'>(苏宿园区)碧桂园文景阁超大平</View>
              <View className='name2'>台花园6室2厅4卫345万260平方米大小</View>
              <View className='position'>5室2厅4卫|260m²|南北<Text>碧桂园文景阁</Text></View>
              <View className='price'>345 <Text className='wan'>万</Text> <Text className='mian'>13269.23元/m²</Text></View>
              <View className='from'>
                <AtIcon value='user' size='24' color='#000'></AtIcon>
                <Text>陈冬红</Text>
                <Text>二百房</Text>
              </View>
            </View>
          </View>
        </View>
        <View className='btn'>
          <View className='share'>
            <AtIcon value='user' size='30' color='#000'></AtIcon>
            <View>陈冬红</View>
          </View>
          <View className='share1'>
            <AtIcon value='star' size='30' color='#000'></AtIcon>
            <View>收藏</View>
          </View>
          <View className='Btns'>
            <Button className='btn1'>在线咨询</Button>
            <Button className='btn2'>电话咨询</Button>
          </View>
        </View>
      </View >
    )
  }
}

// https://img1.baidu.com/it/u=1342130754,306943470&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img0.baidu.com/it/u=3295534422,3155222370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img1.baidu.com/it/u=2064254833,770634332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500
// https://img1.baidu.com/it/u=1144874046,3925078084&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375
// https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img0.baidu.com/it/u=1649151030,2162866999&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394